<template>
  <div class="Organize-fellowship pages-box">
    <div class="header flex-center">
      <i class="iconfont icon-dajiantou" @click="$router.go(-1)"></i>组织联谊
    </div>
    <div class="section">
      <div class="content">
        <div class="banner">
          <img src="../assets/img/home_banner.png" alt="" />
        </div>
        <div class="tab-box">
          <div
            class="tab"
            :class="{ tabActive: tabActive == 1 }"
            @click="changeTab(1)"
          >
            <div class="tab-label">我来跟团</div>
            <div class="line"></div>
          </div>
          <div
            class="tab"
            :class="{ tabActive: tabActive == 2 }"
            @click="changeTab(2)"
          >
            <div class="tab-label">我来组团</div>
            <div class="line"></div>
          </div>
        </div>
        <div v-if="tabActive == 1">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              :finished-text="finishedText"
              @load="onLoad"
            >
              <div v-if="list.length > 0">
                <div
                  class="item"
                  v-for="(item, index) in list"
                  :key="index"
                  @click="goDetail(item.id)"
                >
                  <img v-lazy="ImgDomin(item.coverImg)" alt="" />
                  <div class="con">
                    <div class="title">{{ item.title }}</div>
                    <div class="tip">
                      组织单位：<span>{{ item.organization }}</span>
                    </div>
                    <div class="tip">
                      活动地点：<span>{{ item.fellowshipAddr }}</span>
                    </div>
                    <div class="tip">
                      活动时间：<span>{{ item.activeStart }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="empty" v-else>
                <img
                  style="width: 100%"
                  src="../assets/img/common-empty.png"
                  alt=""
                />
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
        <div v-if="tabActive == 2">
          <van-form @submit="onSubmit">
            <div class="module">
              <van-field
                v-model="form.title"
                size="large"
                name="title"
                label="活动主题"
                placeholder="请输入活动主题"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写活动主题' }]"
              />
              <van-field name="coverImg" label="">
                <template #input>
                  <div style="display: flex; flex-direction: column">
                    <div style="color: #b3b5b9; margin-bottom: 20px">
                      请上传活动图片
                    </div>
                    <van-uploader
                      v-model="coverImg"
                      :max-count="1"
                      :before-read="onRead"
                      :before-delete="delImg"
                      accept=".jpeg,.jpg,.png"
                    />
                  </div>
                </template>
              </van-field>
            </div>
            <div class="module">
              <van-field
                  v-model="form.organization"
                  readonly
                  clickable
                  size="large"
                  name="organization"
                  label="行业类别"
                  placeholder="请选择行业类别"
                  input-align="right"
                  right-icon="arrow"
                  @click="categoryShow2 = true"
                  required
              />
              <van-field
                v-model="form.unitClass"
                readonly
                clickable
                size="large"
                name="unitClass"
                label="单位类别"
                placeholder="请选择单位类别"
                input-align="right"
                right-icon="arrow"
                @click="categoryShow = true"
              />
              <van-field
                v-model="form.overallNum"
                size="large"
                name="overallNum"
                label="活动总人数"
                placeholder="请输入活动总人数"
                input-align="right"
                required
              />
              <van-field
                v-model="form.manNum"
                size="large"
                name="manNum"
                label="我方男生人数"
                placeholder="请输入我方男生人数"
                input-align="right"
              />
              <van-field
                v-model="form.womanNum"
                size="large"
                name="womanNum"
                label="我方女生人数"
                placeholder="请输入我方女生人数"
                input-align="right"
              />
            </div>
            <div class="module">
              <van-field
                v-model="form.trade"
                size="large"
                name="trade"
                label="意向联谊行业"
                placeholder="请输入意向联谊行业"
                input-align="right"
              />
              <van-field
                v-model="form.forwardManNum"
                size="large"
                name="forwardManNum"
                label="期待男生人数"
                placeholder="请选择期待男生人数"
                input-align="right"
              />
              <van-field
                v-model="form.forwardWomanNum"
                size="large"
                name="forwardWomanNum"
                label="期待女生人数"
                placeholder="请输入期待女生人数"
                input-align="right"
              />
              <van-field
                v-model="form.undertaking"
                size="large"
                name="undertaking"
                label="经费承担"
                placeholder="请输入经费承担"
                input-align="right"
                required
              />
              <van-field
                v-model="form.sponsor"
                size="large"
                name="sponsor"
                label="主办方"
                placeholder="请输入主办方"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写主办方' }]"
              />
              <van-field
                v-model="form.contactName"
                size="large"
                name="contactName"
                label="联系人"
                placeholder="请输入联系人姓名"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写联系人姓名' }]"
              />
              <van-field
                v-model="form.phone"
                size="large"
                name="phone"
                label="联系电话"
                placeholder="请输入联系电话"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写联系电话' }]"
              />
              <van-field
                v-model="form.activeStart"
                size="large"
                readonly
                clickable
                name="activeStart"
                label="联谊时间"
                placeholder="请选择联谊时间"
                input-align="right"
                right-icon="arrow"
                required
                :rules="[{ required: true, message: '请选择联谊时间' }]"
                @click="
                  showPicker = true;
                  dateType = 1;
                "
              />
              <van-field
                v-model="form.fellowshipAddr"
                size="large"
                name="fellowshipAddr"
                label="联谊地点"
                placeholder="请输入联谊地点"
                input-align="right"
                required
                :rules="[{ required: true, message: '请填写联谊地点' }]"
              />
              <van-field
                v-model="form.activeEnd"
                size="large"
                readonly
                clickable
                name="activeEnd"
                label="组团截至时间"
                placeholder="请选择组团截至时间"
                input-align="right"
                right-icon="arrow"
                required
                :rules="[{ required: true, message: '请选择组团截至时间' }]"
                @click="
                  showPicker = true;
                  dateType = 2;
                "
              />
            </div>
            <div class="module">
              <van-field
                v-model="form.design"
                rows="5"
                autosize
                name="design"
                label=""
                type="textarea"
                placeholder="请简要概括活动方案"
              />
            </div>
            <div style="margin: 16px">
              <van-button round block color="#fd7895" native-type="submit"
                >提交</van-button
              >
            </div>
          </van-form>
        </div>
      </div>
    </div>
    <!-- 选择日期 -->
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="new Date()"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!--    选择行业类别-->
    <van-popup v-model="categoryShow2" position="bottom">
      <van-picker
          show-toolbar
          value-key="title"
          :columns="categoryList2"
          @confirm="industry"
          @cancel="categoryShow2 = false"
      />
    </van-popup>
    <!-- 选择单位类别 -->
    <van-popup v-model="categoryShow" position="bottom">
      <van-picker
        show-toolbar
        value-key="title"
        :columns="categoryList"
        @confirm="categoryConfirm"
        @cancel="categoryShow = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { getGroup, createGroup, getcategory } from "@/api/fellowship";
import { uploadImg } from "@/api/users";
import { parseTime } from "@/utils/tools";
import {getIndustryCategory} from "../api/activity";
export default {
  data() {
    return {
      tabActive: 1,
      params: {
        current: 1,
        size: 10,
      },
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      finishedText: "没有更多了",
      form: {
        title: "",
        coverImg: "",
        organization: "",
        unitClass: "",
        overallNum: "",
        manNum: "",
        womanNum: "",
        trade: "",
        forwardManNum: "",
        forwardWomanNum: "",
        undertaking: "",
        sponsor: "",
        contactName: "",
        phone: "",
        activeStart: "",
        fellowshipAddr: "",
        activeEnd: "",
        design: "",
      },
      coverImg: [],
      showPicker: false,
      dateType: 1,
      categoryShow: false,
      categoryShow2: false,
      categoryList: [],
      categoryList2: []
    };
  },
  created() {
    this.getCategory();
    this.industryCategory()
  },
  methods: {
    changeTab(type) {
      this.tabActive = type;
    },
    onLoad() {
      getGroup(this.params)
        .then((res) => {
          if (res.code == 0) {
            let data = res.data;
            if (this.refreshing) {
              this.list = [];
              this.refreshing = false;
            }
            if (this.params.current == 1) {
              this.list = data.records;
            } else {
              this.list = this.list.concat(data.records);
            }
            this.loading = false;

            if (this.list.length >= data.total) {
              this.finished = true;
            } else {
              this.params.current++;
            }
            if (this.list.length == 0) this.finishedText = "暂无数据";
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("数据获取失败，请稍后重试！");
        });
    },
    // 获取行业类别
    industryCategory() {
      getcategory('zylb').then((res) => {
        if (res.code == 0) {
          this.categoryList2 = res.data;
        }
      })
    },
    onRefresh() {
      this.params.current = 1;
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    goDetail(id) {
      this.$router.push({ name: "FellowshipDetail", query: { id: id } });
    },
    industry(value){
      this.form.organization = value.title;
      this.categoryShow2 = false;
    },
    categoryConfirm(value) {
      // this.form.unitClass = value.value;
      this.form.unitClass = value.title;
      this.categoryShow = false;
    },
    onRead(file) {
      if (file.type != "image/jpeg" && file.type != "image/png") {
        return this.$toast("请上传jpg，jpeg，png格式的图片");
      }
      let params = new FormData();
      params.append("file", file);
      uploadImg(params).then((res) => {
        if (res.code == 0) {
          let url = res.data.url
          this.form.coverImg = url;
          this.coverImg = [{url}];
        } else {
          this.$toast(res.msg);
        }
      });
    },
    delImg(file) {
      this.form.coverImg = "";
      this.coverImg = [];
      // let index = this.form.img_list.indexOf(file.content);
      // if (index > -1) this.form.img_list.splice(index, 1);
    },
    onSubmit(values) {
      createGroup(this.form)
        .then((res) => {
          if (res.code == 0) {
            this.$toast("保存成功");
            this.form = {};
            this.tabActive = 1;
            this.onRefresh();
          } else {
            this.$toast(res.msg);
          }
        })
        .catch((err) => {
          this.$toast("保存失败，请稍后重试！");
        });
    },
    onConfirm(value) {
      console.log(value, "value");
      if (this.dateType == 1) {
        this.form.activeStart = parseTime(value);
      } else {
        this.form.activeEnd = parseTime(value);
      }
      this.showPicker = false;
      console.log(parseTime(value), "=======");
    },
    // 获取单位类别
    getCategory() {
      getcategory("dwlb").then((res) => {
        if (res.code == 0) {
          this.categoryList = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/css/organize-fellowship.less");
</style>
<style>
.van-field__right-icon {
  color: #bebfc1 !important;
}
</style>
